<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2023-01-30 16:17:08
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-01-30 16:59:07
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <caption>简单计算器</caption>
        <tr>
            <td>第一个数</td>
            <td><input type="text" id="num1" ></td>
        </tr>
        <tr>
            <td>第二个数</td>
            <td><input type="text" id="num2"></td>
        </tr>
        <tr>
            <td>运算符</td>
            <td>
                <select name="" id="operator">
                    <option value="add">+</option>
                    <option value="sub">-</option>
                    <option value="mul">*</option>
                    <option value="div">/</option>
                </select>
            </td>

        </tr>
        <tr>
            <td><button onclick="mycal()">=</button></td>
            <td><input type="text" id="result"></td>
    </table>

    <script>
        function mycal(){
            var num1 = document.getElementById("num1").value;
            var num2 = document.getElementById("num2").value;
            var result = 0;
            var operator = document.getElementById("operator").value;
            console.log(operator);
            switch(operator){
                case "add":
                    result = parseInt(num1) + parseInt(num2);
                    break
                case "sub":
                    result = parseInt(num1) - parseInt(num2);
                    break
                case "mul":
                    result = parseInt(num1) * parseInt(num2);
                    break
                case "div":
                    result =parseInt(num1) / parseInt(num2);
                    break
            }

            document.getElementById("result").value = result;
        }

        mycal("+");
    </script>
    
</body>
</html>